<template>
    <div ref="el" class="wrapper">
        <div class="container">
            <div class="container-content">
                <div class="header">
                    <img src="http://data.vcranking.cn/fofsurvey/images/pufa.jpg" />
                </div>
                <div class="question">
                    <div class="overview">
                        <div v-for=" (item, i) in overviewList" :key="i">{{ item }}</div>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="21">
                                <div class="question-title">
                                    {{ currModule }}
                                </div>
                                <div ref="containerRef" v-loading="loading" class="question-box">
                                    <div
                                        v-for="(item, index) in questionList"
                                        :id="item.id"
                                        :key="index"
                                        class="question-item"
                                    >
                                        <!-- <div class="question-item-title">{{ item.title }}</div> -->
                                        <div class="question-item-content">
                                            <div v-for="(detail, d_index) in item.details" :key="d_index" class="detail">
                                                <div class="detail-title">
                                                    <el-icon><ArrowRightBold /></el-icon>
                                                    {{ detail.title }}
                                                    <template v-if="detail.conditionJson?.max">
                                                        <span class="notice">（最多选择：<b>{{ detail.conditionJson.max }}</b>项）</span>
                                                    </template>
                                                    <template v-else-if="detail.type == 2">
                                                        <span class="notice">（多选）</span>
                                                    </template>
                                                    <span v-if="detail.conditionJson?.mutex?.target?.length > 0 && detail.conditionJson?.mutex?.source?.length > 0">
                                                        <span class="notice">
                                                            (互斥：
                                                            <span class="option">
                                                                {{ detail.conditionJson.mutex.target.join(',') }}&lt;&gt;{{ detail.conditionJson.mutex.source.join(',') }}
                                                            </span>)
                                                        </span>
                                                    </span>
                                                </div>
                                                <div class="option">
                                                    <el-radio-group v-if="detail.type == 1">
                                                        <el-radio
                                                            v-for="(o,o_index) in detail.optionJson"
                                                            :key="o_index"
                                                            :value="o.key"
                                                            :label="o.label"
                                                        >
                                                            {{ o.key }}. {{ o.label }}
                                                            <template v-if="o.other == 1">
                                                                ：<el-input style="width: 100px;" placeholder="请填写" />
                                                            </template>
                                                        </el-radio>
                                                    </el-radio-group>
                                                    <el-checkbox-group v-else-if="detail.type == 2">
                                                        <el-checkbox
                                                            v-for="(o,o_index) in detail.optionJson"
                                                            :key="o_index"
                                                            :value="o.key"
                                                            :label="o.label"
                                                        >
                                                            {{ o.key }}. {{ o.label }}
                                                            <template v-if="o.other == 1">
                                                                ：<el-input style="width: 100px;" placeholder="请填写" />
                                                            </template>
                                                        </el-checkbox>
                                                    </el-checkbox-group>
                                                    <el-input v-else-if="detail.type==3" type="textarea" :auto-size="{ minRows: 3, maxRows: 5 }" />
                                                    <template v-else-if="detail.type==4">
                                                        <div v-for="(o, o_index) in detail.optionJson" :key="o_index" class="inline-inp">
                                                            {{ o.label }}： <el-input placeholder="" />
                                                        </div>
                                                    </template>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <el-anchor
                                    :container="containerRef"
                                    direction="vertical"
                                    type="underline"
                                    :offset="30"
                                    @click="onChangeAnchorFunc"
                                >
                                    <el-anchor-link
                                        v-for="(item, index) in questionList"
                                        :key="index"
                                        :href="'#'+ item.id"
                                        :title="item.title"
                                    />
                                </el-anchor>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="feedback">
                    <div v-for="(item, index) in feedbackDescList" :key="index" class="txt">
                        {{ item? item :'' }}
                    </div>
                    <el-input type="textarea" :auto-size="{ minRows: 3, maxRows: 5 }" />
                </div>
                <div class="footer">
                    <div v-for="(item, index) in footerDescList" :key="index" class="txt">
                        {{ item? item :'' }}
                    </div>
                    <div>
                        <el-form
                            ref="ruleForm"
                            :model="formData"
                            :rules="formRules"
                            label-position="left"
                            label-width="120px"
                            inline
                        >
                            <div class="w-full">
                                <el-row type="flex">
                                    <el-col :span="12">
                                        <el-form-item label="姓名" prop="name">
                                            <el-input
                                                v-model="formData.name"
                                                placeholder="请输入姓名"
                                                class="edit-item"
                                                clearable
                                            />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="公司名称" prop="company">
                                            <el-input
                                                v-model="formData.company"
                                                placeholder="请输入公司名称"
                                                class="edit-item"
                                                clearable
                                            />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row type="flex">
                                    <el-col :span="12">
                                        <el-form-item label="手机号码" prop="phone">
                                            <el-input
                                                v-model="formData.phone"
                                                placeholder="请输入手机号码"
                                                class="edit-item"
                                                clearable
                                            />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="Email" prop="email">
                                            <el-input
                                                v-model="formData.email"
                                                placeholder="请输入Email"
                                                class="edit-item"
                                                clearable
                                            />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-form>
                    </div>
                    <p class="save-edit">
                        <el-button type="primary" @click="submitForm(ruleFormRef)">
                            提  交
                        </el-button>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" >
import { replace } from 'lodash-es'
import { viewSurveyTemplateApi } from '@/api/admin'
import { defineComponent, onMounted, reactive, ref, nextTick } from 'vue'
import type { FormRules } from 'element-plus'

export default defineComponent({
	name: 'QuestionView',
	components: {},
	props:{
		templateId: {
			type: Number
		}
	},
	setup(props) {
		const el = ref([])
		const loading = ref(true)
		const containerRef = ref<HTMLElement | null>(null)
		const headerImgUrl = ref('')
		const overviewList = ref([])
		const feedbackDescList = ref([])
		const footerDescList = ref([])
		const questionList = ref([])
		const scrollAnchorId = ref([])
		const currModule = ref('')
		const fixedTitle = ref(false)

		let formData = ref(<
      {
        nameZh: string
        nameEn: string
        headerImg: string
        headerDesc: string
      }
    >{
    	nameZh: '',
    	nameEn: '',
    	headerImg: '',
    	headerDesc: ''
    })
		const formRules = reactive<FormRules>({
			name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
			company: [{ required: true, message: '请输入公司名称', trigger: 'change' }],
			phone: [{ required: true, message: '请输入手机号码', trigger: 'change' }],
			email: [{ required: true, message: '请输入Email', trigger: 'change' }]
		})

		const initFunc = async () => {
			await viewSurveyTemplateApi(props.templateId).then((res)=>{
				if(res){
					console.log('res---', res)
					if(res.headerImg) headerImgUrl.value = res.headerImg
					if(res.headerDesc) overviewList.value = res.headerDesc.split('\n')
					if(res.feedbackDesc) feedbackDescList.value = res.feedbackDesc.split('\n')
					if(res.footerDesc) footerDescList.value = res.footerDesc.split('\n')
					res.groupList.forEach((n)=>{
						if(n.details && n.details.length > 0){
							n.details.forEach((d)=>{
								if(d.optionJson) d.optionJson = JSON.parse(d.optionJson)
								if(d.conditionJson) d.conditionJson = JSON.parse(d.conditionJson)
								else d.conditionJson = {}
							})
						}
					})
					questionList.value = res.groupList
					if (questionList.value.length > 0) {
						currModule.value = questionList.value[0].title
					}
					loading.value = false
				}
			})
		}
		const onChangeAnchorFunc = async (e: MouseEvent) => {
			console.log('e', e.target)
			console.log('hash', e.target.hash)
			fixedTitle.value = true
			currModule.value = e.target.innerText
			// console.log('containerRef.value---', containerRef)
			nextTick(() => {
				let top = containerRef.value.scrollTop
				console.log('top---', top)
				// containerRef.value.scrollTop = top - 200
				// console.log('el.value---', el.value)
				// let div = el.value.querySelector('.question-box')
				// console.log('div---', div)
				// div.scrollTop = 30

				// containerRef.value.scrollTop = 30
				// let survey = el.value.querySelector(`#survey_div_${item.id}`)
				// let div = el.value.querySelector('.questionnaire-box')
				// div.scrollTop = survey.offsetTop + survey.offsetHeight - div.offsetHeight
			})
		}
		onMounted(() => {
			initFunc()
			console.log('props.selId==', props.templateId)
		})
		return {
			el,
			loading,
			scrollAnchorId,
			containerRef,
			overviewList,
			feedbackDescList,
			footerDescList,
			questionList,
			onChangeAnchorFunc,
			currModule,
			fixedTitle,

			formData,
			formRules
		}
	}
})
</script>
<style lang="scss" scoped>
.wrapper {
  margin: 0 auto;
  max-width: 100% !important;
  height: 600px;
  overflow-y: scroll;
  overflow-x: hidden;
  .container {
    width: 100%;
    height: 100%;
    padding: 30px 30px 0px 30px;
    .container-content {
      width: 93%;
      margin: 0;
      padding: 0;
      .header {
        font-size: 14px;
        color: #666666;
        background: #ffffff;
        position: relative;
        z-index: 99;
        img {
          width: 100%;
        }
      }
      .question {
        border-right: 1px solid #E9E9E9;
        border-bottom: 1px dotted #E9E9E9;
        border-left: 1px double #E9E9E9;
        .overview {
          font-size: 14px;
          color: #666666;
          padding: 12px 0px 12px 20px;
          background: #ffffff;
          position: relative;
          z-index: 99;
          div {
            margin: 10px;
          }
        }
        .question-title {
          font-size: 16px;
          font-weight: bolder;
          color: #666;
          font-family: '微软雅黑', serif;
          min-height: 21px;
          background-color: #3ca0f6 !important;
          text-align: center;
          height: 30px;
          line-height: 30px;
          color: #fff !important;
          left: 0;
          top: 0;
          position: absolute;
          width: 86.8%;
          z-index: 2;
        }
        .fixed-title {
          left: 0;
          top: 0;
          position: absolute;
          width: 86.8%;
          z-index: 2;
        }
        .question-box {
          height: 300px;
          overflow-y: auto;
        }
        .question-item {
          margin-top: 30px;
          background-color:  rgba(255, 0, 0, 0.02);
          font-size: 14px;
          font-weight: bold;
          .question-item-content {
            .detail {
              margin: 0;
              padding: 30px 30px 0px 30px;
              .detail-title {
                border: 1px solid #E9E9E9;
                background-color: #FCFCFC;
                padding: 5px 8px 5px 20px;
                min-height: 25px;
                line-height: 25px;
                border-radius: 5px;
                .el-icon {
                  color: #F78515 !important;
                  margin-right: 5px;
                }
              }
              .option {
                padding: 20px;
                .el-radio {
                  width: 100%;
                }
                .el-checkbox {
                  width: 100%;
                }
                .el-input {
                  width: 40%;
                }
                .inline-inp {
                  margin-bottom: 10px;
                }
              }
            }
          }
        }
      }
      .feedback{
        padding: 20px 0px 20px 0px;
        .txt {
          font-size: 18px;
          font-weight: 700;
          margin-bottom: 10px;
        }
      }
      .footer{
        padding: 20px 0px 20px 0px;
        .txt {
          font-size: 18px;
          font-weight: 700;
          margin-bottom: 10px;
        }
        .save-edit {
          text-align: center;
          .el-button {
            font-size: 18px;
            width: 200px;
            height: 30px;
          }
        }
      }
    }
  }
}
</style>
